﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Metropolis - Portfolio Single</title>
        <meta name="description" content="Multipurpose HTML5 Themplate">
        <meta name="author" content="pixel-industry">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width">


        <!-- stylesheets -->
        <link rel="stylesheet" href="css/basic.css" />
        <link rel="stylesheet" href="css/style.css" />   
        <link rel="stylesheet" href="css/responsive.css" />  
        <link rel="stylesheet" href="css/red.css" />
        <link rel="stylesheet" href="css/prettyPhoto.css" media="screen" />
        <link rel="stylesheet" href="css/nivo-slider.css" />

        <!-- Fonts -->
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&amp;subset=latin,cyrillic-ext,greek-ext,greek,vietnamese,latin-ext,cyrillic' rel='stylesheet' type='text/css'>

        <!-- Icons -->
        <link rel="stylesheet" href="pixons/style.css" />
        <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" />
        
        <link rel="stylesheet" href="style-switcher/styleSwitcher.css" media="screen" />

        <!--[if lt IE 9]>
            <script src="js/html5shiv.js"></script>
        <![endif]-->
        
        <!--[if lt IE 9]>
            <script src="js/selectivizr-min.js"></script>
        <![endif]-->
        
        <!--[if IE 8]>
            <link rel="stylesheet" href="css/ie8.css" media="screen" />
        <![endif]-->
    </head>

    <body>
         <!-- style switcher start -->
        <section id="style-switcher">
            <section id="styles-container">
                <section>
                    <h6>Layouts</h6>
                    <ul class="skin-list">
                        <li class="metropolis-default"><a href="../metropolis-default/portfolio-single.html">Default</a></li>
                        <li class="metropolis-clean active"><a href="#">Clean & Minimal</a></li>
                        <li class="metropolis-blue"><a href="../metropolis-blue/portfolio-single.html">Creative Blue</a></li>
                    </ul>
                </section>

                <section class="first">
                    <h6>Color Style</h6>
                    <p>Which theme color you want to use? Here are some predefined colors.</p>
                    <ul class="styles-list">
                        <li class="blue">1</li>
                        <li class="green">2</li>
                        <li class="orange">3</li>                        
                        <li class="red">4</li>
                        <li class="yellow">5</li>
                    </ul>
                </section>
            </section>
            <a href="#" id="styles-button"><div id="switcher-logo"></div></a>
        </section><!-- style switcher end -->
        
        <!-- #header-wrapper start -->
        <section id="header-wrapper" class="clearfix">
            <!-- #header start -->
            <header id="header" class="clearfix">

                <!-- #logo start -->
                <section id="logo">
                    <a href="index.html">
                        <img src="img/red/logo.png" alt="logo" />
                    </a>
                </section><!-- #logo end -->

                <!-- contact-info-container -->
                <section id="contact-info-container">
                    <ul class="info">
                        <li>
                            <span class="text-dark">Call us on:</span> +00 123 5874
                        </li>

                        <li>
                            <span class="text-dark">Email: </span>
                            <a class="text-color" href="malito:sales-info@business.com">sales-info@business.com</a>
                        </li>
                    </ul>

                    <ul class="social-links">
                        <li>
                            <a href="#" class="pixons-twitter-1"></a>
                        </li>

                        <li>
                            <a href="#" class="pixons-linkedin"></a>
                        </li>

                        <li>
                            <a href="#" class="pixons-facebook-1"></a>
                        </li>

                        <li>
                            <a href="#" class="pixons-xing"></a>
                        </li>

                        <li>
                            <a href="#" class="pixons-skype"></a>
                        </li>
                    </ul>
                </section><!-- .contact-info-container end -->
            </header><!-- #header end -->

            <!-- #nav-container start -->
            <section id="nav-container">

                <section class="container_12">
                    <section class="grid_12">
                        <!-- #nav start -->
                        <nav id="nav">
                            <ul>
                                <li>
                                    <span class="nav-icon icon-home"></span>
                                    <a href="index.html">Home</a>
                                </li>

                                <li>
                                    <span class="nav-icon icon-user"></span>
                                    <a href="#">Pages</a>
                                    <ul>
                                        <li><a href="about.html">About</a></li>
                                        <li><a href="services.html">Services</a></li>
                                        <li><a href="faq.html">FAQ</a></li>
                                        <li><a href="page-sidebar-left.html">Page sidebar left</a></li>
                                        <li><a href="page-sidebar-right.html">Page sidebar right</a></li>
                                        <li><a href="pricing.html">Pricing tables</a></li>
                                    </ul>
                                </li>

                                <li class="current-menu-item">
                                    <span class="nav-icon icon-camera"></span>
                                    <a href="#">Portfolio</a>
                                    <ul>
                                        <li><a href="portfolio1.html">Portfolio 1</a></li>
                                        <li><a href="portfolio2.html">Portfolio 2</a></li>
                                        <li><a href="portfolio2-alt.html">Portfolio 2 alternative</a></li>
                                        <li><a href="portfolio3.html">Portfolio 3</a></li>
                                        <li><a href="portfolio3-alt.html">Portfolio 3 alternative</a></li>
                                        <li><a href="portfolio4.html">Portfolio 4</a></li>
                                        <li><a href="portfolio4-alt.html">Portfolio 4 alternative</a></li>
                                        <li><a href="portfolio-gallery.html">Portfolio gallery</a></li>
                                        <li class="current-menu-item"><a href="portfolio-single.html">Portfolio single</a></li>
                                    </ul>
                                </li>

                                <li>
                                    <span class="nav-icon icon-list"></span>
                                    <a href="#">Blog</a>

                                    <ul>
                                        <li><a href="blog.html">Blog default</a></li>
                                        <li><a href="blog-alt.html">Blog alternative</a></li>
                                        <li><a href="blog-single.html">Blog single</a></li>
                                    </ul>
                                </li>

                                <li>
                                    <span class="nav-icon icon-cogs"></span>
                                    <a href="#">Shortcodes</a>
                                    <ul>
                                        <li><a href="shortcodes.html">Page elements</a></li>
                                        <li><a href="#">Third level</a>
                                            <ul>
                                                <li><a href="#">Menu item</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>

                                <li>
                                    <span class="nav-icon icon-map-marker"></span>
                                    <a href="contact.html">Contact</a>
                                </li>
                            </ul>
                        </nav><!-- #nav end -->

                        <!-- responsive navigation start -->
                        <select id="nav-responsive">
                            <option selected="" value="">Site Navigation...</option>

                            <option value="index.html">Home version 1</option>

                            <option value="about.html">About us</option>
                            <option value="services.html">Services</option>
                            <option value="faq.html">FAQ Page</option>
                            <option value="page-sidebar-left.html">Page sidebar left</option>
                            <option value="page-sidebar-right.html">Page sidebar right</option>
                            <option value="pricing.html">Pricing tables</option>

                            <option value="portfolio1.html">Portfolio 1 column</option>
                            <option value="portfolio2.html">Portfolio 2 columns</option>
                            <option value="portfolio2-alt.html">Portfolio 2 alternative</option>
                            <option value="portfolio3.html">Portfolio 3 columns</option>
                            <option value="portfolio3-alt.html">Portfolio 3 alternative</option>
                            <option value="portfolio4.html">Portfolio 4 columns</option>
                            <option value="portfolio4-alt.html">Portfolio 4 alternative</option>
                            <option value="portfolio-gallery.html">Portfolio gallery</option>
                            <option value="portfolio-single.html">Portfolio single</option>

                            <option value="blog.html">Blog default</option>
                            <option value="blog-alt.html">Blog alternative</option>
                            <option value="blog-single.html">Blog single</option>

                            <option value="shortcodes.html">Shortcodes</option>
                            <option value="contact.html">Contact</option>
                        </select><!-- responsive navigation end -->

                        <section id="search-box">
                            <form action="#" method="get">
                                <input id="m_search" name="s" type="text" placeholder="Type and hit enter..." />
                                <input class="search-submit" type="submit" />
                            </form>
                        </section><!-- #search-box end -->
                    </section><!-- .grid_12 end -->
                </section><!-- .container_12 end -->


            </section><!-- #nav-container end -->
        </section><!-- #header-wrapper end -->

        <!-- .top-shadow -->
        <div class="top-shadow"></div>

        <!-- .page-title-container start -->
        <section class="page-title-container">

            <!-- .container_12 start -->
            <div class="container_12">

                <!-- .page-title start -->
                <div class="page-title grid_12">
                    <div class="title">
                        <h1>Portfolio Single</h1>
                    </div>

                    <ul class="breadcrumbs">
                        <li><a  class="home" href="#">Home</a></li>
                        <li>/</li>
                        <li><span class="active">Portfolio Single</span></li>
                    </ul>
                </div><!-- .page-title end -->
            </div><!-- .container_12 end -->
        </section><!-- .page-title-container end -->

        <!-- #content-wrapper start -->
        <section id="content-wrapper">

            <!-- .container_12 start -->
            <section class="container_12 clearfix">

                <!-- .grid_7.slider-wrapper start -->
                <article class="grid_7 slider-wrapper">
                    <section id="slider" class="nivoSlider image-slider portfolio-slider">
                        <img src="img/portfolio/single-1.jpg" alt="portfolio image" title="#htmlcaption1">
                        <img src="img/portfolio/single-2.jpg" alt="portfolio image" title="#htmlcaption2">
                        <img src="img/portfolio/single-3.jpg" alt="portfolio-image" title="#htmlcaption3">
                    </section>

                    <div id="htmlcaption1">
                        <div class="title-wrap">
                            <div class="title">
                                <h3>Super Creative Project</h3>
                            </div>
                        </div>

                        <div class="subtitle-wrap">
                            <div class="subtitle">
                                <p>From Webdesign Creative Category</p>
                            </div>
                        </div>

                    </div>

                    <div id="htmlcaption2">
                        <div class="title-wrap">
                            <div class="title">
                                <h3>Color My World</h3>
                            </div>
                        </div>

                        <div class="subtitle-wrap">
                            <div class="subtitle">
                                <p>Subtitle Goes Here</p>
                            </div>
                        </div>
                    </div>

                    <div id="htmlcaption3">
                        <div class="title-wrap">
                            <div class="title">
                                <h3>Time For Running</h3>
                            </div>
                        </div>

                        <div class="subtitle-wrap">
                            <div class="subtitle">
                                <p>Subtitle Goes here</p>
                            </div>
                        </div>
                    </div><!-- #htmlcaption3 end -->
                </article><!-- .grid_7.slider-wrapper end -->

                <!-- .grid_5.portfolio-description start -->
                <article class="grid_5 portfolio-description">
                    <h3>Portfolio Project Title</h3>

                    <ul class="meta">
                        <li>
                            <span>
                                Photography 
                            </span>
                            //
                        </li>

                        <li class="date">APRIL 29, 2013</li>
                    </ul>

                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Nam viverra euismod odio, gravida pellentesque urna 
                        varius vitae. Sed dui lorem, adipiscing in adipiscing 
                        et, interdum nec metus. Mauris ultricies, justo eu 
                        convallis placerat, felis enim ornare nisi, vitae 
                        mattis nulla ante id dui. Ut lectus purus, commodo et 
                        tincidunt vel, interdum sed lectus. Vestibulum
                        adipiscing tempor.

                        <br /><br />

                        Mauris ultricies, justo eu 
                        convallis placerat, felis enim ornare nisi, vitae 
                        mattis nulla ante id dui. Ut lectus purus, commodo et 
                        tincidunt vel, interdum sed lectus. Vestibulum
                        adipiscing tempor.

                    </p>

                    <br />

                    <ul>
                        <li>
                            <span class="text-dark">Date: </span>May 3, 2013
                        </li>

                        <li>
                            <span class="text-dark">Client: </span>themeforest.net
                        </li>

                        <li>
                            <span class="text-dark">Skills needed:</span> HTML, CSS, jQuery, PHP, Photoshop
                        </li>
                    </ul>

                    <br />

                    <a class="btn-medium white">
                        <span>Visit Website</span>
                    </a>
                </article><!-- .grid_5.portfolio-description end -->

                <div class="clearfix"></div>

                <!-- .grid_12.carousel-portfolio -->
                <article class="grid_12 carousel-portfolio">

                    <section class="section-title center">
                        <div class="title-container">
                            <section class="title">
                                <h2>Related Projects</h2>
                                <span>Even more really great projects</span>
                            </section>
                        </div>
                    </section><!-- .section-title .center end -->

                    <!-- .carousel-li start -->
                    <ul id="foo2" class="carousel-li">

                        <!-- .portfolio-style-2 start -->
                        <li class="portfolio-style-2">
                            <!-- .portfolio start -->
                            <figure class="portfolio clearfix">
                                <div class="portfolio-image">
                                    <a href="portfolio-single.html">
                                        <img src="img/portfolio/thumb/portfolio-1.jpg" width="220" alt="portfolio">
                                    </a>

                                    <div class="portfolio-hover">
                                        <div class="mask"></div>
                                        <ul>
                                            <li class="portfolio-zoom">
                                                <a href="img/portfolio/1col/portfolio-1.jpg" 
                                                   data-gal="prettyPhoto[pp_gallery]">zoom
                                                </a>
                                            </li>

                                            <li class="portfolio-single">
                                                <a href="portfolio-single.html">single</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>

                                <figcaption>
                                    <a class="title">Portfolio Project Title</a>
                                    <span class="subtitle">Photography</span>
                                </figcaption>
                            </figure><!-- .portfolio end -->
                        </li><!-- .portfolio-style-2 end -->

                        <!-- .portfolio-style-2 start -->
                        <li class="portfolio-style-2">
                            <!-- .portfolio start -->
                            <figure class="portfolio clearfix">
                                <div class="portfolio-image">
                                    <a href="portfolio-single.html">
                                        <img src="img/portfolio/thumb/portfolio-2.jpg" width="220" alt="portfolio">
                                    </a>

                                    <div class="portfolio-hover">
                                        <div class="mask"></div>
                                        <ul>
                                            <li class="portfolio-zoom">
                                                <a href="img/portfolio/1col/portfolio-2.jpg" 
                                                   data-gal="prettyPhoto[pp_gallery]">zoom
                                                </a>
                                            </li>

                                            <li class="portfolio-single">
                                                <a href="portfolio-single.html">single</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>

                                <figcaption>
                                    <a class="title">Portfolio Project Title</a>
                                    <span class="subtitle">Web Design</span>
                                </figcaption>
                            </figure><!-- .portfolio end -->
                        </li><!-- .portfolio-style-2 end -->

                        <!-- .portfolio-style-2 start -->
                        <li class="portfolio-style-2">
                            <!-- .portfolio start -->
                            <figure class="portfolio clearfix">
                                <div class="portfolio-image">
                                    <a href="portfolio-single.html">
                                        <img src="img/portfolio/thumb/portfolio-3.jpg" width="220" alt="portfolio">
                                    </a>

                                    <div class="portfolio-hover">
                                        <div class="mask"></div>
                                        <ul>
                                            <li class="portfolio-zoom">
                                                <a href="img/portfolio/1col/portfolio-3.jpg" 
                                                   data-gal="prettyPhoto[pp_gallery]">zoom
                                                </a>
                                            </li>

                                            <li class="portfolio-single">
                                                <a href="portfolio-single.html">single</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>

                                <figcaption>
                                    <a class="title">Portfolio Project Title</a>
                                    <span class="subtitle">Graphic Design</span>
                                </figcaption>
                            </figure><!-- .portfolio end -->
                        </li><!-- .portfolio-style-2 end -->

                        <!-- .portfolio-style-2 start -->
                        <li class="portfolio-style-2">
                            <!-- .portfolio start -->
                            <figure class="portfolio clearfix">
                                <div class="portfolio-image">
                                    <a href="portfolio-single.html">
                                        <img src="img/portfolio/thumb/portfolio-4.jpg" width="220" alt="portfolio">
                                    </a>

                                    <div class="portfolio-hover">
                                        <div class="mask"></div>
                                        <ul>
                                            <li class="portfolio-zoom">
                                                <a href="img/portfolio/1col/portfolio-4.jpg" 
                                                   data-gal="prettyPhoto[pp_gallery]">zoom
                                                </a>
                                            </li>

                                            <li class="portfolio-single">
                                                <a href="portfolio-single.html">single</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>

                                <figcaption>
                                    <a class="title">Portfolio Project Title</a>
                                    <span class="subtitle">Photography</span>
                                </figcaption>
                            </figure><!-- .portfolio end -->
                        </li><!-- .portfolio-style-2 end -->

                        <!-- .portfolio-style-2 start -->
                        <li class="portfolio-style-2"  data-alpha="webdesign">
                            <!-- .portfolio start -->
                            <figure class="portfolio clearfix">
                                <div class="portfolio-image">
                                    <a href="portfolio-single.html">
                                        <img src="img/portfolio/thumb/portfolio-5.jpg" width="220" alt="portfolio">
                                    </a>

                                    <div class="portfolio-hover">
                                        <div class="mask"></div>
                                        <ul>
                                            <li class="portfolio-zoom">
                                                <a href="img/portfolio/1col/portfolio-5.jpg" 
                                                   data-gal="prettyPhoto[pp_gallery]">zoom
                                                </a>
                                            </li>

                                            <li class="portfolio-single">
                                                <a href="portfolio-single.html">single</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>

                                <figcaption>
                                    <a class="title">Portfolio Project Title</a>
                                    <span class="subtitle">Web Design</span>
                                </figcaption>
                            </figure><!-- .portfolio end -->
                        </li><!-- .portfolio-style-2 end -->

                        <!-- .portfolio-style-2 start -->
                        <li class="portfolio-style-2">
                            <!-- .portfolio start -->
                            <figure class="portfolio clearfix">
                                <div class="portfolio-image">
                                    <a href="portfolio-single.html">
                                        <img src="img/portfolio/thumb/portfolio-6.jpg" width="220" alt="portfolio">
                                    </a>

                                    <div class="portfolio-hover">
                                        <div class="mask"></div>
                                        <ul>
                                            <li class="portfolio-zoom">
                                                <a href="img/portfolio/1col/portfolio-6.jpg" 
                                                   data-gal="prettyPhoto[pp_gallery]">zoom
                                                </a>
                                            </li>

                                            <li class="portfolio-single">
                                                <a href="portfolio-single.html">single</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>

                                <figcaption>
                                    <a class="title">Portfolio Project Title</a>
                                    <span class="subtitle">Web Design</span>
                                </figcaption>
                            </figure><!-- .portfolio end -->
                        </li><!-- .portfolio-style-2 end -->

                        <!-- .portfolio-style-2 start -->
                        <li class="portfolio-style-2">
                            <!-- .portfolio start -->
                            <figure class="portfolio clearfix">
                                <div class="portfolio-image">
                                    <a href="portfolio-single.html">
                                        <img src="img/portfolio/thumb/portfolio-7.jpg" width="220" alt="portfolio">
                                    </a>

                                    <div class="portfolio-hover">
                                        <div class="mask"></div>
                                        <ul>
                                            <li class="portfolio-zoom">
                                                <a href="img/portfolio/1col/portfolio-7.jpg" 
                                                   data-gal="prettyPhoto[pp_gallery]">zoom
                                                </a>
                                            </li>

                                            <li class="portfolio-single">
                                                <a href="portfolio-single.html">single</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>

                                <figcaption>
                                    <a class="title">Portfolio Project Title</a>
                                    <span class="subtitle">Web Design</span>
                                </figcaption>
                            </figure><!-- .portfolio end -->
                        </li><!-- .portfolio-style-2 end -->

                        <!-- .portfolio-style-2 start -->
                        <li class="portfolio-style-2"  data-alpha="graphicdesign">
                            <!-- .portfolio start -->
                            <figure class="portfolio clearfix">
                                <div class="portfolio-image">
                                    <a href="portfolio-single.html">
                                        <img src="img/portfolio/thumb/portfolio-8.jpg" width="220" alt="portfolio">
                                    </a>

                                    <div class="portfolio-hover">
                                        <div class="mask"></div>
                                        <ul>
                                            <li class="portfolio-zoom">
                                                <a href="img/portfolio/1col/portfolio-8.jpg" 
                                                   data-gal="prettyPhoto[pp_gallery]">zoom
                                                </a>
                                            </li>

                                            <li class="portfolio-single">
                                                <a href="portfolio-single.html">single</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>

                                <figcaption>
                                    <a class="title">Portfolio Project Title</a>
                                    <span class="subtitle">Graphic Design</span>
                                </figcaption>
                            </figure><!-- .portfolio end -->
                        </li><!-- .portfolio-style-2 end -->
                    </ul><!-- .carousel-li end -->

                    <div class="clearfix"></div>

                    <div class="carousel-pagination" id="foo2_pag"></div>

                </article><!-- .grid_12.carousel-portfolio end -->
            </section><!-- .container_12 end -->
        </section><!-- #content-wrapper end -->

        <!-- #footer-wrapper start -->
        <div id="footer-wrapper" class="clearfix">

            <!-- #footer -->
            <footer id="footer" class="container_12">

                <!-- .footer-widget-container start -->
                <ul class="footer-widget-container grid_3">

                    <!-- .widget.widget_text start -->
                    <li class="widget widget_text">

                        <section class="carousel-article">
                            <img src="img/red/logo-footer.png" alt="logo" />

                            <br /><br />

                            <ul id="foo1" class="carousel-li">
                                <li>
                                    <p>
                                        We proudly present you Metropolis, perfectly 
                                        clean and original theme. This is sliding 
                                        article, yo you can put more info about your 
                                        company.  
                                    </p>
                                </li>

                                <li>
                                    <p>
                                        Sed ut perspiciatis unde omnis iste natus error 
                                        sit voluptatem accusantium doloremque laudantium, 
                                        totam rem aperiam, eaque ipsa quae ab illo 
                                        inventore veritatis et quasi. 
                                    </p>
                                </li>

                                <li>
                                    <p>
                                        Sed ut perspiciatis unde omnis iste natus error 
                                        sit voluptatem accusantium doloremque laudantium, 
                                        totam rem aperiam, eaque ipsa quae ab illo 
                                        inventore veritatis et quasi. 
                                    </p>
                                </li>
                            </ul>

                            <div class="clearfix"></div>

                            <div class="carousel-pagination" id="foo1_pag"></div>
                        </section>

                    </li><!-- .widget.widget_text end -->
                </ul><!-- .footer-widget-container end -->

                <!-- .footer-widget-container start -->
                <ul class="footer-widget-container grid_3">
                    <!-- .widget pi_recent_posts start -->
                    <li class="widget pi_recent_posts">
                        <div class="title">
                            <h5>latest posts</h5>
                        </div>

                        <ul class="footer-blog">
                            <li>
                                <div class="meta">
                                    <a class="icon-edit"></a>
                                </div>

                                <div class="post">
                                    <a href="blog-single.html"> Nam libero tempore, </a>
                                    <p class="info">26 MARCH 2013, <a href="blog-single.html">0 COMMENTS</a></p>
                                </div>
                            </li>

                            <li>
                                <div class="meta">
                                    <a class="icon-link"></a>
                                </div>

                                <div class="post">
                                    <a href="blog-single.html">Temporibus autem quibusdam, </a>
                                    <p class="info">26 MARCH 2013, <a href="blog-single.html">2 COMMENTS</a></p>
                                </div>
                            </li>

                            <li>
                                <div class="meta">
                                    <a class="icon-camera"></a>
                                </div>

                                <div class="post">
                                    <a href="blog-single.html">Excepteur sint occaecat cupid, </a>
                                    <p class="info">26 MARCH 2013, <a href="blog-single.html">2 COMMENTS</a></p>
                                </div>
                            </li>
                        </ul>


                    </li><!-- .widget pi_recent_posts end -->
                </ul><!-- .footer-widget-container end -->

                <!-- .footer-widget-container start -->
                <ul class="footer-widget-container grid_3">

                    <!-- .widget.widget_text start -->
                    <li class="widget widget_text">
                        <div class="title">
                            <h5>get in touch</h5>
                        </div>
                        <p>
                            If you have any questions don't hesitate to contact us
                        </p>

                        <br />

                        <ul class="contact-info">
                            <li class='address'>
                                <p>Address: Some street 123, Manhattan, New York, USA</p>
                            </li>

                            <li class="phone">
                                <p>Telephone: +00 123 5874</p>
                            </li>

                            <li class="mail">
                                <p>Email: <a href='mailto:sales-info@business.com'>info@business.com</a></p>
                            </li>
                        </ul>
                    </li><!-- .widget.widget_text end -->
                </ul><!-- .footer-widget-container end -->

                <!-- .footer-widget-container start -->
                <ul class="footer-widget-container grid_3">

                    <!-- .widget.widget_text start -->
                    <li class="widget widget_text">
                        <div class="title">
                            <h5>newsletter subscribe</h5>
                        </div>

                        <p>
                            Stay up to date with latest news from our company. 
                            We promise we won’t spam you.
                        </p>

                        <br />

                        <form class="newsletter">
                            <input type="email" class="email" placeholder="Enter your email here...">
                            <input type ="submit" class="submit" value="SEND">
                        </form>
                    </li><!-- .widget.widget_text end -->

                </ul><!-- footer-widget-container end -->
            </footer><!-- #footer end -->

            <!-- .container_12.copyright-container start -->
            <div class="container_12 copyright-container">

                <!-- .grid_12 start -->
                <div class="grid_12">                  

                    <div class="grid_6 alpha">
                        <p>
                            Copyright Metropolis 2013. Designed by Pixel industry. All rights reserved.
                        </p>
                    </div>

                    <div class="grid_6 omega">
                        <ul class="footer-breadcrumbs">
                            <li>
                                <a href="index.html">Home</a>
                            </li>

                            <li>
                                <a href="about.html">About</a>
                            </li>

                            <li>
                                <a href="portfolio1.html">Portfolio</a>
                            </li>

                            <li>
                                <a href="blog.html">Blog</a>
                            </li>

                            <li>
                                <a href="contact.html">Contact</a>
                            </li>
                        </ul>
                    </div><!-- .grid_6 omega end -->
                </div><!-- .grid_12 end -->
            </div><!-- .container_12.copyright-container end -->
        </div><!-- #footer-wrapper end -->

        <!-- scripts -->
        <script  src="js/jquery-1.8.3.js"></script> <!-- jQuery library -->  
        <script  src="js/jquery.placeholder.min.js"></script><!-- jQuery placeholder fix for old browsers -->
        <script  src="js/jquery.carouFredSel-6.0.0-packed.js"></script><!-- CarouFredSel carousel plugin -->
        <script  src="js/portfolio.js"></script> <!-- portfolio custom options -->
        <script  src="js/jquery.prettyPhoto.js"></script> <!-- prettyPhoto lightbox -->
        <script  src="js/jquery.nivo.slider.js"></script><!-- nivo slider -->
        <script  src="js/jquery.touchSwipe-1.2.5.js"></script><!-- support for touch swipe on mobile devices -->
        <script  src="style-switcher/styleSwitcher.js"></script><!-- Style Switcher plugin -->
        <script  src="js/include.js"></script> <!-- jQuery custom options -->

        <script>
            /* <![CDATA[ */
            // NEWSLETTER FORM AJAX SUBMIT
            $('.newsletter .submit').on('click', function(event){
                event.preventDefault();
                var email = $('.email').val();
                var form_data = new Array({ 'Email' : email});
                $.ajax({
                    type: 'POST',
                    url: "contact.php",
                    data: ({'action': 'newsletter', 'form_data' : form_data})
                }).done(function(data) {
                    alert(data);
                });
            });
            
            /* NIVO SLIDER */
            $(window).load(function() {
                $('#slider').nivoSlider();
            });

            // PORTFOLIO CAROUSEL
            $("#foo2").carouFredSel({
                auto: false,
                scroll: 1,
                pagination: "#foo2_pag",
                swipe: {
                    ontouch: true,
                    onMouse: true
                },
                width: 'variable',
                height: 'variable',
                items:{
                    width: 'auto',
                    visible: 4
                }
            });

            // FOOTER CAROUSEL ARTICLE 
            $("#foo1").carouFredSel({
                auto: true,
                scroll: 1,
                pagination: "#foo1_pag",
                swipe: {
                    ontouch: true,
                    onMouse: true
                },
                width: 'variable',
                height: 'variable',
                items:{
                    width: 'auto',
                    visible: 1
                }
            });
            /* ]]> */
        </script>
    </body>
</html>
